
<template>
    <div class="lbigBox">
        <div class="userNav">
            <div>
                <div class="dealerImg"></div>
                <div>
                	<a href="#/home/dealermanage" style="color: #000000;">
        		              经销商管理
        	        </a>
                </div>
                <div class="crumbs"></div>
                <div>新建经销商账号</div>
            </div>            
        </div>
        	<!--提示框-->
			<div id="tipMsg" v-show="istipMsg">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">已编辑的内容未保存，确定进行其他操作？</p>
							<div class="yesNo">
								<input type="button" value="取消" id="yes" @click="abolish">
								<input type="button" value="确定" id="no" @click="confirm">
							</div>
						</div>
					</div>
				</div>
			</div>
<!--保存-->
<!--提示框-->
        <div id="tipMsg" v-show="istipMsgNew">
                <div class="approval-leave-bg">
                    <div class="tipBox">
                        <div>
                            <p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
                        </div>
                        <div>
                            <p style="padding:40px 0;text-align: center;width:100%;">恭喜，保存成功！</p>
                            <div class="yesNo">
                                <a href="#/home/dealermanage"><input type="button" value="确定" id="configNew" @click="confirmNews"></a>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <div class="bigBoxbot">
         	<div class="information">
         	     账号资料
         	</div>
         	<div class="systemAddform">
         		    <div class="addSide">
                        <div><small>*</small>名称：</div>
                        <div><input type="text" minlength="2" maxlength="20"  placeholder="请输入名称" v-model="name" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>联系人：</div>
                        <div><input type="text" minlength="2" maxlength="15" placeholder="请输入联系人" v-model="linkman" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>联系电话：</div>
                        <div><input type="text" minlength="10" maxlength="20" placeholder="请输入联系电话" v-model="telephone" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
                        <span style="margin-left: 30px; color: red;font-size: 12px;" v-show="promptel">请输入正确的11位有效手机号</span>
                    </div>
                    <div class="addSide">
                        <div><small>*</small>公司地址：</div>
                        <div><input type="text" minlength="2" maxlength="30"  placeholder="请输入公司地址" v-model="Address" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
                    </div>
         	</div>        	         	
         	<div class="systemAddform">        		    
                    <div class="systemSave" @click="save" style="margin-top: 60px;">
                    	<input type="button" :disabled='saveBtn' value="保存">		
                    </div>
         	</div>
        </div>
    </div>
</template>
<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'user',
        data() {
            return {
                users: [
                ],
                addRemove:false,
                account:"",
    			name:"",
    			address:"",
    			linkman:"",
    			telephone:"",
    			password:"",
    			Address:"",
    			sideList:[''],
    			istipMsgNew:false,
    			intercept: false,
    			WistipMsg:false,
    			promptel:false,
    			istipMsg:false,
                saveBtn:false
            }
        },
    filters: {

        },
        beforeRouteLeave(to, from, next) {
        this.toPath = to.path
        if (this.intercept == false) {
            this.istipMsg = true
        } else if (this.intercept == true) {
            this.istipMsg = false
            next()
         }
        },
    created: function () {
// 判断用户是否登录
            var userName = sessionStorage.getItem('userName')
                if (!userName) {
                    this.WistipMsg=true
                }else{
// 获取数据
                }
            },
    methods: {
//判断登录
        	Wconfirm:function(){
    		        this.WistipMsg=false
    		        this.$router.push({
                          path: '/login'
                    })
    	    },
        	confirmNews:function(){
                    var self=this
                    this.intercept == true
                    self.istipMsg=false
                    self.istipMsgNew=false     
            },
            abolish: function() {
				this.istipMsg = false
			},
			confirm: function() {
				this.istipMsg = false
				this.intercept = true
				var url = this.toPath
                this.$router.push({
                path: url
            })
			},
//输入框颜色改变
            inputFocus:function(e){            
                    e.srcElement.style.borderColor='#DDDDDD'
                    this.promptel=false
            },
            address:function(){
                    this.sideList.push('')
            },
            remove:function(index){
                    this.sideList.splice(index,1)      
            },
//表单验证
            valior:function(){
                    var flag=true
                    var errArr=[]
                    var pattern = /[`~!@#\$%\^\&\*_\+<>\?:"\{\},\.\\\/;'\[\]]/
                    var patterna=/^[0-9]{11,11}$/
                    var kongge=/\s+/g
                    var topArr=[this.name,this.linkman,this.telephone,this.Address].concat(this.sideList)
                        for(var i=0;i<topArr.length;i++){
                            if(!topArr[i]||(topArr[i]==='')||pattern.test(topArr[i])||kongge.test(topArr[i])){
                                        errArr.push(i)
                            }
                        }
                    var systemAddformTop=document.getElementsByClassName('systemAddform')[0]
                    var inputTop=systemAddformTop.getElementsByTagName('input')
                        for(var i=0;i<inputTop.length;i++){
                            if(errArr.indexOf(i)!==-1){
                                        flag=false
                                        inputTop[i].style.borderColor = 'red'
                            }
                        }
                        if(! patterna.test(this.telephone)){
                                        inputTop[2].style.borderColor = 'red'
                                        this.promptel=true
                                        flag=false
                        }
                                        return flag
            },   
//修改保存
            save:function(){  
          	        if(!this.valior()){return}
                    this.saveBtn = true; 
                    var self=this;
                    var addArr=[
                            {
                            "address":self.Address,              
                        }
                    ]
                    var accountObj={
               	                account:self.account,
    			                name:self.name,
    			                address:self.Address,
    			                linkman:self.linkman,
    			                logicDelete:'',
    			                telephone:self.telephone,
    			                password:self.password
                        }
    		        var paramJson={
    			                "addressList":addArr,
    			                "account":accountObj
    		            };
    		        var  paramJson1=JSON.stringify(paramJson);   		   		                      		 
    	                this.dealermanageAdd({
    	                        name:self.name,
    	                        linkman:self.linkman,
    	                        telephone:self.telephone,
    	                        address:self.Address
    	                }).then((data)=>{
    		                    if(data.code == 200) {
    		                      this.intercept=true
								  this.$message({
                                  type: 'info',
                                  message: '保存成功!'
                                 })
								  this.$router.push({
                                  path: '/home/dealermanage'
                                }) 
							}else{
								  this.$message({
                                  type: 'info',
                                  message: '服务器异常，请重试!'
                                 })
							}
                            this.saveBtn = false;
    	                })
            },
            ...mapActions(['dealermanageAdd'])
        }
    }
</script>
<style scoped >
.bigBoxbot{
		width: 100%;		
		background-color: #FFFFFF;
		height: calc(100vh - 90px);
	    overflow-x:hidden ;	   
	    margin-top: 10px;
	}
input::-ms-clear{display:none;}
input::-ms-reveal{display: none;}
.lbigBox{
	height: calc(100vh - 90px);
	overflow-x:hidden ;
	overflow-y:hidden ;
	
}
.userNav{width: 100%;height: 50px;border-bottom: 1px solid #ccc;box-shadow: 0 3px 3px #ccc;display: flex;justify-content: space-between;align-items: center;background-color: #FFFFFF;
}
.userNav>div:nth-child(1){width: 420px;height: 25px;display: flex;margin-left: 35px;align-content: center;
}
.userNav>div:nth-child(1) img{width: 25px;height: 25px;
}
.userNav>div:nth-child(1) div{line-height: 25px;margin-left: 5px;padding: 0;color: #333;font-size: 14px;
}
.userNavT{width: 220px;display: flex;align-items: center;
}
.userNavT>div:nth-child(1){display: flex;
}
.userNavT>div:nth-child(1) img{width: 20px;height: 20px;margin-top: 3px;
}
.userNavT>div:nth-child(1) div{line-height: 25px;margin-left: 5px;padding: 0;color: #333;font-size: 14px;
}
.userNavT>div:nth-child(2){color: #888;font-size: 14px;cursor: pointer;
}
.user{position: relative;}
  .information{
    	font-size: 14px;
    	margin-left: 40px;
    	margin-top: 35px;
    	color: #999999;
    }
    .systemAddform{
    	margin-top: -30px;
    	margin-left: 300px;
    }
 .addSide {margin-top: 15px;height: 55px;width: 100%;display: flex;align-items: center;
    }
    .addSide small {font-size: 14px;color: red;margin-right: 5px;
    }
    .addSide>div:nth-child(1) {width: 150px;text-align: right;font-size: 14px;color: #000;
    }
    .addSide input {
    	margin-left: 40px;
    	width: 350px;height: 35px;border: 1px solid #DDDDDD;border-radius: 5px;padding-left: 5px;font-size: 14px;
    }
    #address{
    	margin-left: 20px;
    	width: 112px;
    	height: 32px;
    	border-radius: 5px;
    	border: .5px solid #43DCE7;
    }
    #address a{
    	width: 112px;
    	height: 32px;
    	display: inline-block;
    	text-align: center;
    	line-height: 32px;
    	color: #43DCE7;
    }
    #address a:hover{
    	text-decoration: none;
    }
    #remove{
    	margin-left: 20px;
    	width: 112px;
    	height: 32px;
    	border-radius: 5px;
    	border: .5px solid #E96565;
    }
    .systemSave{
    	width: 150px;
    	height:32px;
    	margin-top: 30px;
    	margin-left: 180px;
    }
    .systemSave input{
    	display: inline-block;
    	width: 150px;
    	height: 32px;
    	color: #FFFFFF;
        background-color: #43DCE7;
    	border-radius: 5px;
    	text-align: center;
    	line-height: 32px;
    }
    #remove a{
    	width: 112px;
    	height: 32px;
    	display: inline-block;
    	text-align: center;
    	line-height: 32px;
    	color: #E96565;
    }
    #remove a:hover{
    	text-decoration: none;
    }
    a{
    	text-decoration: none;
    }
 /*弹出框*/
  .tipBox {
    width: 560px;
    height: 200px;
    border-radius: 5px;
    box-shadow: 0 7px 12px #5F5F5F;
    position: fixed;
    z-index: 400;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
.tipBox {
        animation: bounce-in .8s;
        
    }

@keyframes bounce-in {
    0% {
       transform: translateY(-50%);
       opacity: 0;
    }
 
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
  .tipBox div:nth-child(1) {
    height: 50px;
    line-height: 50px;
    background: #F49362;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .tipBox>div:nth-child(2) {
    height: 150px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .tipBox p {
    margin: 0;
  }

  .yesNo input {
    float: right;
    margin-right: 10px;
    overflow: hidden;
  }

  .yesNo input {
    width: 80px;
    height: 32px;
    line-height: 32px;
    border-radius: 5px;
    color: #fff;
  }

  .yesNo input:nth-child(2) {
    background: #43dce7;
    margin-right: 20px;
  }

  .yesNo input:nth-child(1) {
    background: #999;
  }

  .approval-leave-bg {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    overflow: hidden;
    z-index: 300;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
  }
  #configNew{
    background: #43DCE7;
  }
  .dealerImg{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -76px -170px;
	}
	.crumbs{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -138px -39px;
	}
</style>
